<template>
  <view class="container">
    <!-- 功能1：选择本机图片并预览显示 -->
    <button @click="chooseAndPreviewImage">选择本机图片并预览显示</button>
    <image v-if="localImageUrl" :src="localImageUrl" mode="widthFix" class="image-preview" />

    <!-- 功能2：下载指定网络图片并显示，打印下载进度 -->
    <button @click="downloadNetworkImage">下载网络图片并显示</button>
    <image v-if="networkImageUrl" :src="networkImageUrl" mode="widthFix" class="image-preview" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      localImageUrl: '', // 存储本机选择的图片临时路径
      networkImageUrl: '' // 存储下载的网络图片临时路径
    }
  },
  methods: {
    // 功能1：选择本机图片并预览显示
    chooseAndPreviewImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          // 预览图片
          uni.previewImage({
            current: tempFilePaths[0],
            urls: tempFilePaths
          })
          // 显示图片
          this.localImageUrl = tempFilePaths[0]
        }
      })
    },

    // 功能2：下载指定网络图片并显示，打印下载进度
    downloadNetworkImage() {
      const imageUrl = 'https://p1.ssl.qhimgs1.com/t04d7c65bf64ac17a07.jpg'
      uni.downloadFile({
        url: imageUrl,
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            this.networkImageUrl = downloadRes.tempFilePath
          }
        },
        // 监听下载进度
        onProgressUpdate: (progress) => {
          console.log('下载进度：' + progress.progress + '%');
          console.log('已经下载的数据长度：' + progress.totalBytesWritten + 'B');
          console.log('预期需要下载的数据长度：' + progress.totalBytesExpectedToWrite + 'B');
        },
        fail: (err) => {
          console.error('下载失败：', err);
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.image-preview {
  width: 100%;
  margin-top: 20rpx;
}
button {
  margin-bottom: 20rpx;
}
</style>